<template>
  <div class="app-page-box">
    <div class="app-page">
      <Back label="设备列表" :cb="goBack" />
      <a-button class="submit add" @click="onAdd">添加设备</a-button>
      <div class="content">
        <div class="total">
          设备总额：<span>{{ total }}元</span>
        </div>
        <div class="list">
          <div class="li" v-for="(item, index) in data" :key="item.id" @click="onView(item)">
            <div class="close" @click.stop="onClose(item, index)"></div>
            <div class="name">{{ item.leaseSupplier + item.leaseModel + item.leaseBrand }}</div>
            <div class="info">
              <span>单价：{{ item.purchasePrice }}元</span>
              <span>数量：{{ item.number }}</span>
            </div>
          </div>
        </div>
      </div>
      <a-button class="submit sure" @click="onSure">确定</a-button>
    </div>
  </div>
</template>

<script setup>
  import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
    import { Modal } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { createVNode } from 'vue';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const route = useRoute();
  const total = ref(0);
  const data = ref([]);

  function onAdd() {
    router.push({
      path: '/rzApply/device-params',
      query: {
        bussNo: rzApplyStore.getBussNo,
      },
    });
  }
  function goBack() {
    router.replace({
      path: '/rzApply/add',
      query: {
        bussNo: rzApplyStore.getBussNo,
      },
    });
  }
  async function onClose(item, index) {
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '是否确认删除该数据？',
      onOk() {
        rzApplyApi.leaseHoldDelete({ id: item.id }).then((res) => {
          if (res.code == 0) {
            data.value.splice(index, 1);
          }
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  async function getData() {
    rzApplyApi.dictByKeyCode(rzApplyStore.getBussNo).then((res) => {
      if (res.code == 0) {
        total.value = res.data;
      }
    });
    const res = await rzApplyApi.leaseHoldGetLeaseList({ bussNo: rzApplyStore.getBussNo });
    if (res.code == 0) {
      data.value = res.data;
    }
  }
  function onSure() {
    router.back();
  }
  function onView(item) {
    rzApplyStore.setViewDeviceInfo(item);
    router.push({
      path: '/rzApply/device-params',
      query: {
        bussNo: rzApplyStore.getBussNo,
        id: item.id,
      },
    });
  }

  onMounted(() => {
    getData();
  });
</script>
<style scoped lang="less">
  .app-page {
    display: flex;
    flex-direction: column;
    padding: 20rem;
    position: relative;
    .total {
      font-size: 20rem;
      color: #000000;
      margin-top: 62rem;
      span {
        font-size: 26rem;
        color: #eb5f18;
      }
    }
    .add {
    }
    .content {
      flex: 1;
      .list {
        margin-top: 28rem;
        display: flex;
        flex-wrap: wrap;
        .li {
          width: calc(25% - 29rem);
          background: #ffffff;
          box-shadow: 0px 0px 15rem 0rem rgba(0, 0, 0, 0.1);
          border-radius: 12rem;
          font-family: Microsoft YaHei;
          position: relative;
          color: #000;
          padding: 25rem 22rem 18rem;
          margin-right: 38rem;
          margin-bottom: 38rem;
          &:nth-child(4n) {
            margin-right: 0;
          }
          .close {
            width: 17rem;
            height: 17rem;
            position: absolute;
            right: 6rem;
            cursor: pointer;
            top: 6rem;
            background-image: url(/@/assets/images/close.png);
            background-repeat: no-repeat;
            background-size: contain;
          }
          .name {
            font-size: 20rem;
            margin-bottom: 29rem;
          }
          .info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            span {
              height: 15rem;
              font-size: 16rem;
            }
          }
        }
        .li:hover,
        .active {
          background: #eb5f18;
          box-shadow: 0px 0px 15px 0px rgba(239, 51, 48, 0.28);
          color: #fff;
          .close {
            background-image: url(/@/assets/images/close-fff.png);
          }
        }
      }
    }

    .add {
      width: 126px;
      height: 42px;
      background: #fc5451 !important;
      border-radius: 5px;
      position: absolute;
      right: -32rem;
      top: 24rem;
    }
    .sure {
      width: 270rem;
      height: 42rem;
      background: #eb5f18;
      border-radius: 5rem;
      margin: auto;
    }
  }
</style>
